<script setup>
import { Check } from '@element-plus/icons-vue'
import { usePlayerFlyout } from '@/hooks'

const containerRef = ref()
const { mouseenter, mouseleave } = usePlayerFlyout(containerRef)

const selected = ref(false)
</script>

<template>
  <div
    ref="containerRef"
    class="group relative"
    @mouseenter="mouseenter"
    @mouseleave="mouseleave"
  >
    <button
      class="setting-icon relative mr-0.5 inline-flex h-10 cursor-pointer items-center justify-center rounded-md px-2 text-sm outline-none transition-transform duration-200 group-hover:rotate-90"
    >
      <media-icon
        class="h-8 w-8 transform transition-transform duration-200 ease-out"
        type="settings"
      />
    </button>

    <ul
      class="flyout absolute -right-16 bottom-16 hidden w-52 overflow-hidden rounded bg-black/50 p-4 text-sm"
    >
      <div class="mb-2">
        <h5 class="mb-1">颜色校正</h5>
        <ul class="text-xs">
          <li
            class="flex cursor-pointer items-center rounded py-2 transition-colors hover:bg-white/10"
            @click="selected = !selected"
          >
            <div
              class="px-2 text-primary"
              :class="selected ? 'opacity-100' : 'opacity-0'"
            >
              <el-icon class="top-[1px]" :size="16"> <Check /> </el-icon>
            </div>
            <div>颜色矫正</div>
          </li>
        </ul>
      </div>
      <div class="mb-2">
        <h5 class="mb-1">自动跟踪</h5>
        <ul class="mb-2 text-xs">
          <li
            class="cursor-pointer rounded py-2 pl-8 transition-colors hover:bg-white/10"
          >
            显示活跃面积
          </li>
          <li
            class="cursor-pointer rounded py-2 pl-8 transition-colors hover:bg-white/10"
          >
            显示检测对象
          </li>
        </ul>
      </div>
      <div class="mb-2">
        <h5 class="mb-1">活动数据</h5>
        <ul class="mb-2 text-xs">
          <li
            class="cursor-pointer rounded py-2 pl-8 transition-colors hover:bg-white/10"
          >
            显示所有比赛对象
          </li>
        </ul>
      </div>
    </ul>
  </div>
</template>

<style scoped>
.player-flyout-show .flyout {
  display: block;
}
</style>
